<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>客户管理</el-breadcrumb-item>
                <el-breadcrumb-item>会员等级</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="levelFormData"  class="demo-form-inline">
                <el-form-item >
                    <el-select v-model="levelFormData.levelId" clearable placeholder="请选择等级名称">
                        <el-option
                                v-for="item in selectData"
                                :key="item.levelId"
                                :label="item.levelName"
                                :value="item.levelId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getAllLevel()">查询</el-button>
                    <el-button type="primary" @click="insertLevel()">添加</el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="levelId"
                            label="等级ID">
                    </el-table-column>
                    <el-table-column
                            prop="levelName"
                            label="等级名称">
                    </el-table-column>
                    <el-table-column
                            prop="growthPoint"
                            label="成长值">
                    </el-table-column>
                    <el-table-column
                            prop="defaultLevel"
                            label="是否为默认等级">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.defaultLevel"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949"
                                    disabled>
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="priviledgeComment"
                            label="评论奖励特权">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.priviledgeComment"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949"
                                    @change="changePriviledgeComment(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="priviledgePromotion"
                            label="是否拥有活动特权">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.priviledgePromotion"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949"
                                    @change="changePriviledgePromotion(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="priviledgeMemberPrice"
                            label="是否拥有价格特权">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.priviledgeMemberPrice"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949"
                                    @change="changePriviledgeMemberPricen(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="priviledgeBirthday"
                            label="是否拥有生日特权">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.priviledgeBirthday"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949"
                                    @change="changePriviledgeBirthday(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180px">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle @click="updateLevel(scope.row)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="deleteLevelById(scope.row.levelId)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageUtil.currentPage"
                        :page-sizes="[5,10,15,20]"
                        :page-size="pageUtil.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>

            <el-dialog
                    title="等级信息"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <span>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-input v-model="ruleForm.levelId" readonly="readonly" type="hidden"></el-input>
                      <el-form-item label="等级名称" prop="levelName">
                        <el-input v-model="ruleForm.levelName"></el-input>
                      </el-form-item>
                        <el-form-item label="成长值" prop="growthPoint">
                        <el-input v-model="ruleForm.growthPoint"></el-input>
                      </el-form-item>
                        <el-form-item label="默认等级" prop="defaultLevel">
                            <el-switch
                                    v-model="ruleForm.defaultLevel"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949">
                            </el-switch>
                      </el-form-item>
                        <el-form-item label="评论特权" prop="priviledgeComment">
                            <el-switch
                                    v-model="ruleForm.priviledgeComment"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949">
                            </el-switch>
                      </el-form-item>
                        <el-form-item label="活动特权" prop="priviledgePromotion">
                            <el-switch
                                    v-model="ruleForm.priviledgePromotion"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949">
                            </el-switch>
                      </el-form-item>
                        <el-form-item label="价格特权" prop="priviledgeMemberPrice">
                            <el-switch
                                    v-model="ruleForm.priviledgeMemberPrice"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949">
                            </el-switch>
                      </el-form-item>
                        <el-form-item label="生日特权" prop="priviledgeBirthday">
                            <el-switch
                                    v-model="ruleForm.priviledgeBirthday"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949">
                            </el-switch>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                      </el-form-item>
                    </el-form>
                </span>
            </el-dialog>


        </el-card>
    </div>
</template>

<script>
    import qs from 'qs'

    export default {
        name: "showLevel",
        data(){
            return {
                // 表单
                ruleForm: {
                    levelName:'',
                    growthPoint:'',
                    levelId:'',
                    defaultLevel:'',
                    priviledgeComment:'',
                    priviledgePromotion:'',
                    priviledgeMemberPrice:'',
                    priviledgeBirthday:''
                },
                // 验证规则
                rules: {
                    levelName: [
                        { required: true, message: '请输入等级名称', trigger: 'blur' },
                        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                    ],
                    growthPoint: [
                        { required: true, message: '请输入成长值', trigger: 'change' }
                    ],

                },

                // 条件搜索对象
                levelFormData:{
                    levelId:''
                },

                //表格数据
                tableData:[],
                pageUtil:{
                    //每页显示的条数
                    pageSize: 5,
                    //当前的显示的页码
                    currentPage:1,
                },
                //总条数
                total:0,
                // 弹出层
                dialogVisible:false,
                // 搜索下拉菜单数据
                selectData:[]
            }
        },
        methods:{

            // 关闭弹出层
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },

            // 搜索下拉菜单
            getAll() {
                this.$axios({
                    method:'get',
                    url:'clms-client/level/getAll'
                }).then(r=>{
                    if (r.data.code == 200) {
                        this.selectData = r.data.listData;
                    }
                })
            },

            // 修改等级信息
            updateLevel(row) {
                this.dialogVisible = true;
                this.ruleForm = row;
            },

            // 新增等级信息
            insertLevel() {
                this.dialogVisible = true;
                this.ruleForm = {};
            },

            // 提交表格
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var growthPoint = parseInt(this.ruleForm.growthPoint);
                        if (growthPoint <= 0 ) {
                            this.$message.error("数据输入有误");
                        } else {
                            this.$axios({
                                method:'put',
                                url:'clms-client/level/updateLevel',
                                data:qs.stringify(this.ruleForm)
                            }).then(r=>{
                                if (r.data.code == 200) {
                                    this.$message.success(r.data.message);
                                    // 刷新表格
                                    this.handleCurrentChange(1);
                                    this.dialogVisible = false;
                                }else {
                                    this.$message.error(r.data.object);
                                    this.dialogVisible = false;
                                }
                            })
                        }
                    } else {
                        this.$message.error(r.data.message);
                        return false;
                    }
                });
            },

            // 重置表格
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            // 根据id删除等级
            deleteLevelById(levelId) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios({
                        method:'delete',
                        url:'clms-client/level/deleteLevelById',
                        params:{
                            levelId: levelId
                        }
                    }).then(r=>{
                        if (r.data.code == 200) {
                            this.$message.success(r.data.message);
                            // 刷新表格
                            this.handleCurrentChange(1);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            // 改变是否拥有评论奖励特权
            changePriviledgeComment(row) {
                this.$axios({
                    method:'put',
                    url:'clms-client/level/changePriviledgeComment',
                    params:{
                        priviledgeComment: row.priviledgeComment,
                        levelId: row.levelId
                    }
                }).then(r=>{
                    if (r.data.code == 200) {
                        this.$message.success(r.data.message);
                        // 刷新表格
                        this.getAllClient();

                    }
                })
            },

            // 改变是否拥有活动奖励特权
            changePriviledgePromotion(row) {
                this.$axios({
                    method:'put',
                    url:'clms-client/level/changePriviledgePromotion',
                    params:{
                        priviledgeComment: row.priviledgePromotion,
                        levelId: row.levelId
                    }
                }).then(r=>{
                    if (r.data.code == 200) {
                        this.$message.success(r.data.message);
                        // 刷新表格
                        this.getAllClient();

                    }
                })
            },

            // 改变是否拥有价格特权
            changePriviledgeMemberPricen(row) {
                this.$axios({
                    method:'put',
                    url:'clms-client/level/changePriviledgeMemberPricen',
                    params:{
                        priviledgeComment: row.priviledgeMemberPricen,
                        levelId: row.levelId
                    }
                }).then(r=>{
                    if (r.data.code == 200) {
                        this.$message.success(r.data.message);
                        // 刷新表格
                        this.getAllClient();

                    }
                })
            },

            // 改变是否拥有生日特权
            changePriviledgeBirthday(row) {
                this.$axios({
                    method:'put',
                    url:'clms-client/level/changePriviledgeBirthday',
                    params:{
                        priviledgeComment: row.priviledgeBirthday,
                        levelId: row.levelId
                    }
                }).then(r=>{
                    if (r.data.code == 200) {
                        this.$message.success(r.data.message);
                        // 刷新表格
                        this.getAllClient();

                    }
                })
            },

            // 根据条件查询等级信息
            getAllLevel() {
                this.$axios({
                    method:'post',
                    url:'clms-client/level/getAllLevel',
                    params:{
                        currentPage: this.pageUtil.currentPage,
                        pageSize: this.pageUtil.pageSize,
                        levelId: this.levelFormData.levelId
                    }
                }).then(r=>{
                    if (r.data.code == 200) {
                        this.tableData = r.data.object.records;
                        this.total = r.data.object.total;
                    }
                })
            },
            // 改变每页显示的条数时触发该方法
            handleSizeChange(val){
                this.pageUtil.pageSize = val;
                this.getAllLevel();
            },
            //切换页码时触发该方法
            handleCurrentChange(val){
                this.pageUtil.currentPage = val;
                this.getAllLevel();
            }

        },

        // 钩子函数
        created() {
            // 根据条件查询等级信息
            this.getAllLevel();
            this.getAll();
        }
    }
</script>

<style >

</style>
